<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入axios库 -->
    <script src="./axios.min.js"></script>
</head>

<body>
    <script>
        // 光说不练假把式，我们来模拟一个真实场景
        async function getData(url) {
            let {
                data
            } = await axios.get('./data.json');
            console.log(data);
            document.body.innerHTML = `
                <div class="box">
                    <h1 class="title">${data.title}</h1>
                    <ul class="list">
                        ${
                            data.list.map(item=>`<li>${item}</li>`).join('')
                        }
                    </ul>
                </div>
            `;
        }
        getData();

        // 当然，也可以结合promise.all()使用
        async function getData2() {
            let res = await Promise.all([axios.get('./data.json'), axios.get('./data.json')]);
            console.log(res);
            res.forEach(item => {
                const {data} = item;
                document.body.innerHTML += `
                <div class="box2">
                    <h1 class="title">${data.title}</h1>
                    <ul class="list">
                        ${
                            data.list.map(item=>`<li>${item}</li>`).join('')
                        }
                    </ul>
                </div>
            `;
            })
        }
        getData2();
    </script>
</body>

</html>